<?php
/**
 * Created by PhpStorm.
 * User: FOCUS
 * Date: 2015/1/21
 * Time: 5:23
 * @var $this yii\web\View
 */
use yii\helpers\Html;

?>
<?php $this->beginPage() ?>
    <!DOCTYPE html>
    <html lang="<?= Yii::$app->language ?>">
    <head>
        <meta charset="<?= Yii::$app->charset ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <?= Html::csrfMetaTags() ?>
        <title><?php echo Html::encode($this->title . \backend\models\Option::getSiteTitleWithSeparator()); ?></title>

        <!-- Maniac stylesheets -->
        <?php $this->registerCssFile('@web/css/bootstrap.min.css'); ?>
        <?php $this->registerCssFile('@web/css/font-awesome.min.css'); ?>
        <?php $this->registerCssFile('@web/css/animate/animate.min.css'); ?>

        <?php
        if (!empty($this->params['pageStyleFiles'])) {
            foreach ($this->params['pageStyleFiles'] as $pageStyleFile) {
                $this->registerCssFile($pageStyleFile);
            }
        }
        ?>

        <?php $this->registerCssFile('@web/css/style.css'); ?>

        <?php
        if (!empty($this->params['pageStyle'])) {
            $this->registerCss($this->params['pageStyle']);
        }
        ?>
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <?php $this->head() ?>
    </head>
    <body class="fixed">
    <?php $this->beginBody() ?>
    <!-- Header -->
    <header>
        <a href="index.html" class="logo"><i class="fa fa-bolt"></i> <span>Maniac</span></a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="navbar-btn sidebar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <div class="navbar-header">
                <form role="search" class="navbar-form" method="post" action="#">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search..."/>
                            <span class="input-group-btn">
                                <button type="submit" id="search-btn" class="btn"><i class="fa fa-search"></i></button>
                            </span>
                    </div>
                </form>
            </div>
            <div class="navbar-right">
                <ul class="nav navbar-nav">
                    <li class="dropdown dropdown-notifications">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-bell"></i><span class="label label-warning">5</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header"><i class="fa fa-bell"></i> You have 5 new notifications</li>
                            <li>
                                <ul>
                                    <li><a href="#"><i class="fa fa-users success"></i> New user registered</a></li>
                                    <li><a href="#"><i class="fa fa-heart info"></i> Jane liked your post</a></li>
                                    <li><a href="#"><i class="fa fa-envelope warning"></i> You got a message from
                                            Jean</a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-info success"></i> Privacy settings have been
                                            changed</a></li>
                                    <li><a href="#"><i class="fa fa-comments danger"></i> New comments waiting approval</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer"><a href="#">View all notification</a></li>
                        </ul>
                    </li>

                    <li class="dropdown dropdown-messages">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope"></i><span class="label label-success">6</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header"><i class="fa fa-envelope"></i> You have 6 messages</li>
                            <li>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="/img/avatar2.jpg" class="/img-rounded"
                                                                        alt="image"/></div>
                                            <h4>Jill Doe
                                                <small><i class="fa fa-clock-o"></i> 1 mins</small>
                                            </h4>
                                            <p>Can we meet somewhere?</p>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="/img/avatar.jpg" class="/img-rounded"
                                                                        alt="image"/></div>
                                            <h4>John Doe
                                                <small><i class="fa fa-clock-o"></i> 2 mins</small>
                                            </h4>
                                            <p>Please send me a new email.</p>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="/img/avatar3.jpg" class="/img-rounded"
                                                                        alt="image"/></div>
                                            <h4>Jeremy Doe
                                                <small><i class="fa fa-clock-o"></i> 30 mins</small>
                                            </h4>
                                            <p>Don't forget to subscribe to...</p>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="/img/avatar4.jpg" class="/img-rounded"
                                                                        alt="image"/></div>
                                            <h4>Jean Doe
                                                <small><i class="fa fa-clock-o"></i> 2 hours</small>
                                            </h4>
                                            <p>I sent you a mail about me.</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer"><a href="#">View all messages</a></li>
                        </ul>
                    </li>

                    <li class="dropdown dropdown-tasks">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-tasks"></i><span class="label label-danger">1</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header"><i class="fa fa-tasks"></i> You have 1 new task</li>
                            <li>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <h3>PHP Developing
                                                <small class="pull-right">32%</small>
                                            </h3>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-success" style="width: 32%"
                                                     role="progressbar" aria-valuenow="32" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h3>Database Repair
                                                <small class="pull-right">14%</small>
                                            </h3>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-warning" style="width: 14%"
                                                     role="progressbar" aria-valuenow="14" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h3>Backup Create
                                                <small class="pull-right">65%</small>
                                            </h3>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-info" style="width: 65%"
                                                     role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h3>Create New Modules
                                                <small class="pull-right">80%</small>
                                            </h3>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-danger" style="width: 80%"
                                                     role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer">
                                <a href="#">View all tasks</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown widget-user">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="/img/avatar.jpg" class="pull-left" alt="image"/>
                            <span><?php echo Yii::$app->user->identity->username; ?> <i
                                    class="fa fa-caret-down"></i></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><i class="fa fa-cog"></i>Settings</a>
                            </li>
                            <li>
                                <a href="profile.html"><i class="fa fa-user"></i>Profile</a>
                            </li>
                            <li class="footer">
                                <a href="#"><i class="fa fa-power-off"></i>退出</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- /.header -->

    <!-- wrapper -->
    <div class="wrapper">
        <div class="leftside">
            <div class="sidebar">
                <div class="user-box">
                    <div class="avatar">
                        <img src="/img/avatar.jpg" alt=""/>
                    </div>
                    <div class="details">
                        <p><?php echo Yii::$app->user->identity->username; ?></p>
                        <span class="position">管理员</span>
                    </div>
                    <div class="button">
                        <a href="login.html"><i class="fa fa-power-off"></i></a>
                    </div>
                </div>
                <?php echo backend\widgets\Menu::widget([
                    'options' => ['class' => 'sidebar-menu'],
                    'linkTemplate' => '<a href="{url}">{icon} <span>{label}</span>{angleIcon}</a>',
                    'submenuTemplate' => '<ul class="sub-menu">{items}</ul>',
                    'items' => [
                        // Important: you need to specify url as 'controller/action',
                        // not just as 'controller' even if default action is used.
                        ['label' => '导航菜单', 'options' => ['class' => 'title']],
                        ['label' => '仪表盘', 'url' => ['index/index'], 'icon' => 'fa fa-home',],
                        // 'Products' menu item will be selected as long as the route is 'product/index'
                        ['label' => '文章', 'url' => '#', 'icon' => 'fa fa-edit', 'items' => [
                            ['label' => 'New Arrivals', 'url' => ['product/index', 'tag' => 'new']],
                            ['label' => 'Most Popular', 'url' => ['product/index', 'tag' => 'popular']],
                        ]],
                        [
                            'label' => '产品管理',
                            'url' => '#',
                            'icon' => 'fa fa-tags',
                            'active' => (Yii::$app->controller->getRoute() == 'product/index') || (Yii::$app->controller->getRoute() == 'product/create') || (Yii::$app->controller->getRoute() == 'product/update' || (Yii::$app->controller->getRoute() == 'product/view')),
                            'items' => [
                                [
                                    'label' => '添加产品',
                                    'url' => ['product/create'],
                                ],
                            ],
                        ],
                        [
                            'label' => '分类管理',
                            'url' => '#',
                            'icon' => 'fa fa-list',
                            'items' => [
                                [
                                    'label' => '文章文类',
                                    'url' => ['category/post'],
                                ],
                                [
                                    'label' => '产品分类',
                                    'url' => ['category/product'],
                                ],
                            ],
                        ],
                        ['label' => '系统设置', 'url' => ['system/option'], 'icon' => 'fa fa-gear',],],
                ]); ?>
                <!--            <ul class="sidebar-menu">-->
                <!--                <li class="title">Navigation</li>-->
                <!--                <li class="active">-->
                <!--                    <a href="index.html">-->
                <!--                        <i class="fa fa-home"></i> <span>Dashboard</span>-->
                <!--                    </a>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <a href="inbox.html">-->
                <!--                        <i class="fa fa-envelope"></i> <span>Inbox</span>-->
                <!--                        <small class="label pull-right">10</small>-->
                <!--                    </a>-->
                <!--                </li>-->
                <!--                <li class="sub-nav">-->
                <!--                    <a href="#">-->
                <!--                        <i class="fa fa-briefcase"></i>-->
                <!--                        <span>UI Elements</span>-->
                <!--                        <i class="fa fa-angle-right pull-right"></i>-->
                <!--                    </a>-->
                <!--                    <ul class="sub-menu">-->
                <!--                        <li><a href="typography.html">Typography</a></li>-->
                <!--                        <li><a href="icons.html">Icons</a></li>-->
                <!--                        <li><a href="buttons.html">Buttons</a></li>-->
                <!--                        <li><a href="sliders.html">Sliders</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->
                <!--                <li class="sub-nav">-->
                <!--                    <a href="#">-->
                <!--                        <i class="fa fa-pencil"></i> <span>Forms</span>-->
                <!--                        <i class="fa fa-angle-right pull-right"></i>-->
                <!--                    </a>-->
                <!--                    <ul class="sub-menu">-->
                <!--                        <li><a href="form-elements.html">Form Elements</a></li>-->
                <!--                        <li><a href="form-validation.html">Form Validation</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->
                <!--                <li class="sub-nav">-->
                <!--                    <a href="#">-->
                <!--                        <i class="fa fa-table"></i> <span>Tables</span>-->
                <!--                        <i class="fa fa-angle-right pull-right"></i>-->
                <!--                    </a>-->
                <!--                    <ul class="sub-menu">-->
                <!--                        <li><a href="basic-tables.html">Basic tables</a></li>-->
                <!--                        <li><a href="data-tables.html">Data tables</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->
                <!--                <li class="sub-nav">-->
                <!--                    <a href="#">-->
                <!--                        <i class="fa fa-signal"></i>-->
                <!--                        <span>Charts</span>-->
                <!--                        <i class="fa fa-angle-right pull-right"></i>-->
                <!--                    </a>-->
                <!--                    <ul class="sub-menu">-->
                <!--                        <li><a href="flot.html">Flot</a></li>-->
                <!--                        <li><a href="morris.html">Morris</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <a href="widgets.html">-->
                <!--                        <i class="fa fa-th"></i> <span>Widgets</span>-->
                <!--                        <small class="label label-success pull-right">new</small>-->
                <!--                    </a>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <a href="calendar.html">-->
                <!--                        <i class="fa fa-calendar"></i> <span>Calendar</span>-->
                <!--                    </a>-->
                <!--                </li>-->
                <!--                <li class="sub-nav">-->
                <!--                    <a href="#">-->
                <!--                        <i class="fa fa-folder"></i> <span>Other Pages</span>-->
                <!--                        <i class="fa fa-angle-right pull-right"></i>-->
                <!--                    </a>-->
                <!--                    <ul class="sub-menu">-->
                <!--                        <li><a href="404.html">404 Error</a></li>-->
                <!--                        <li><a href="blank.html">Blank Page</a></li>-->
                <!--                        <li><a href="invoice.html">Invoice</a></li>-->
                <!--                        <li><a href="login.html">Login</a></li>-->
                <!--                        <li><a href="register.html">Register</a></li>-->
                <!--                        <li><a href="lockscreen.html">Lockscreen</a></li>-->
                <!--                        <li><a href="timeline.html">Timeline</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->
                <!--            </ul>-->
                <div class="sidebar-widget online-users">&nbsp;
                    <div class="body online-list">
                        <div class="title">Online Admins <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                        </div>

                        <a href="#" class="item">
                            <div class="/img online pull-left"><img src="/img/avatar2.jpg" alt="User"/></div>
                            <div class="info pull-left">
                                <div class="name">Jill Doe</div>
                                <div class="status">News Writer</div>
                            </div>
                            <div class="pull-right activity">
                                <i class="fa fa-clock-o"></i> now
                            </div>
                        </a>

                        <a href="#" class="item">
                            <div class="/img away pull-left"><img src="/img/avatar3.jpg" alt="User"/></div>
                            <div class="info pull-left">
                                <div class="name">Jeremy Doe</div>
                                <div class="status">Moderator</div>
                            </div>
                            <div class="pull-right activity">
                                <i class="fa fa-clock-o"></i> 5 m
                            </div>
                        </a>

                        <a href="#" class="item">
                            <div class="/img inactive pull-left"><img src="/img/avatar2.jpg" alt="User"/></div>
                            <div class="info pull-left">
                                <div class="name">Jill Doe</div>
                                <div class="status">Uploader</div>
                            </div>
                            <div class="pull-right activity">
                                <i class="fa fa-clock-o"></i> 1 h
                            </div>
                        </a>

                        <a href="#" class="item">
                            <div class="/img online pull-left"><img src="/img/avatar4.jpg" alt="User"/></div>
                            <div class="info pull-left">
                                <div class="name">Jean Doe</div>
                                <div class="status">News Writer</div>
                            </div>
                            <div class="pull-right activity">
                                <i class="fa fa-clock-o"></i> now
                            </div>
                        </a>

                        <div class="footer">
                            <div class="input-group">
                                <input type="text" class="form-control" Placeholder="Search..."/>

                                <div class="input-group-btn">
                                    <button class="btn btn-primary btn-sm"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="body chat">
                        <div class="title"><i class="fa fa-circle text-success"></i>&nbsp; Jill Doe <a href="#"
                                                                                                       class="pull-right close-chat"><i
                                    class="fa fa-times"></i></a></div>

                        <a href="#" class="item">
                            <div class="/img online pull-left"><img src="/img/avatar2.jpg" alt="User"/></div>
                            <div class="message pull-right">What's Up? Anyway the new website is very cool.</div>
                            <div class="pull-right activity">
                                <i class="fa fa-clock-o"></i> now
                            </div>
                        </a>

                        <a href="#" class="item">
                            <div class="/img online pull-left"><img src="/img/avatar2.jpg" alt="User"/></div>
                            <div class="message pull-right">Can you send me a link?</div>
                            <div class="pull-right activity">
                                <i class="fa fa-clock-o"></i> 7 hours ago
                            </div>
                        </a>

                        <a href="#" class="item owner">
                            <div class="message pull-left">Yes, sure I will send you tomorrow via message :)</div>
                            <div class="pull-right activity palette-green-sea">
                                <i class="fa fa-clock-o"></i> 7 hours ago
                            </div>
                        </a>

                        <a href="#" class="item">
                            <div class="/img online pull-left"><img src="/img/avatar2.jpg" alt="User"/></div>
                            <div class="message pull-right">Thank you so much...</div>
                            <div class="pull-right activity">
                                <i class="fa fa-clock-o"></i> 7 hours ago
                            </div>
                        </a>

                        <div class="footer">
                            <div class="input-group">
                                <input type="text" class="form-control" Placeholder="Send a message..."/>

                                <div class="input-group-btn">
                                    <button class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="rightside">
            <div class="page-head">
                <h1>Dashboard
                    <small>awesome features in one theme</small>
                </h1>
                <ol class="breadcrumb">
                    <li>You are here:</li>
                    <li><a href="#">Home</a></li>
                    <li class="active">Dashboard</li>
                </ol>
            </div>
            <?php echo $content; ?>
        </div>
    </div>
    <!-- /.wrapper -->

    <!-- Javascript -->
    <?php $this->registerJsFile('/js/plugins/jquery/jquery-1.10.2.min.js'); ?>
    <?php $this->registerJsFile('/js/plugins/jquery-ui/jquery-ui-1.10.4.min.js'); ?>

    <!-- Bootstrap -->
    <?php $this->registerJsFile('/js/plugins/bootstrap/bootstrap.min.js'); ?>
    <?php $this->registerJsFile('/js/plugins/gritter/jquery.gritter.min.js'); ?>

    <?php
    if (!empty($this->params['pageScriptFiles'])) {
        foreach ($this->params['pageScriptFiles'] as $pageScriptFile) {
            $this->registerJsFile($pageScriptFile);
        }
    }
    ?>

    <!-- Interface -->
    <?php $this->registerJsFile('@web/js/plugins/jquery-countTo/jquery.countTo.js'); ?>
    <?php $this->registerJsFile('@web/js/plugins/slimScroll/jquery.slimscroll.min.js'); ?>
    <?php $this->registerJsFile('@web/js/plugins/pace/pace.min.js'); ?>

    <!-- Forms -->
    <?php $this->registerJsFile('@web/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js'); ?>
    <?php $this->registerJsFile('@web/js/plugins/iCheck/icheck.min.js'); ?>
    <?php $this->registerJsFile('@web/js/custom.js'); ?>

    <!-- Dashboard -->
    <?php
    if (!empty($this->params['pageScript'])) {
        $this->registerJs($this->params['pageScript'], $this::POS_END);
    }
    ?>

    <?php $this->endBody() ?>
    </body>
    </html>
<?php $this->endPage() ?>